웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트의 Array 메소드 filter()에 대하여 알아봅니다.
배열 내장 메소드는 매우 다양한데 그 중에서도 많이 사용되는 메소드를 선택하라면 map(), filter(), reduce() 등이 있습니다. 필터는 자주 사용되면서도 HOF(Higher Order Function)이기 때문에 인자로 다른 함수를 받습니다. 그래서 filter()는 무엇을 할 수 있을까요?
가장 중요한 filter()의 기능은 이름처럼 배열값의 필터링(Filtering) 기능을 수행합니다. 즉 원하는 값만 쉽게 얻을 수 있도록 도와줍니다. 원하는 값만 얻는 기능은 find()가 떠오를 수 있는데 이 둘의 차이점은 제일 하단에 기술하고 아래에서는 filter()에 대하여 좀 더 알아봅니다. 먼저 간단한 문법입니다.
Array.filter(조건 함수);
// 조건 함수<Function> : 특정 조건에 따라 반환할 조건을 가진 함수로 조건이 true인 경우 해당 배열 값을 반환
이처럼 배열에서 특정 조건에 부합하는 값만 얻기 위해 쉽게 적용하고 결과를 얻을 수 있죠. 그럼 아래에서 몇 가지 예제를 만들어보겠습니다.
@ 배열에서 10보다 작은 수의 값만 얻기
만약 다음의 배열 1부터 5까지 값을 가지는 배열에서 홀수 값만 얻으려고 합니다. 이 경우 어떻게 구할 수 있을까요? 우선 홀수 값만 반환하는 함수를 만듭니다.
잘 동작하는지 테스트해봅니다.
홀수인 경우에만 true를 반환하니 잘 만들어졌습니다. 이제 배열에 filter()를 사용해 홀수 값만 얻어봅니다.
결과를 확인해보니 홀수만 반환되었습니다. 의도한대로 동작하는 것을 알 수 있습니다. 이처럼 filter()를 사용하면 배열에서 원하는 값만 쉽게 얻을 수 있죠. 다른 예제를 하나 더 만들어볼까요?
@ 타입이 숫자인 값만 반환하기
이번에는 먼저 배열에서 숫자 값만 반환하는 함수를 만들어야 하겠죠.
역시 숫자만 반환하였습니다. 필터링이 잘 동작하는군요!!
여기까지 filtering을 위해서 filter() 함수를 예제와 함께 알아보았습니다. 아래는 앞에 언급한 find()와 filter()의 차이입니다.
[ 참고 ] 배열 메소드 find()와 filter() 차이는?
실행 결과의 차이는 find()는 하나의 값을 반환하고 filter()는 일치하는 결과 모두를 배열로 반환합니다. map()과 reduce() 역시 map()은 배열을 reduce()는 하나의 결과를 반환하므로 약간 비슷합니다. 쉽게 말해서 find()는 제일 먼저 일치하는 조건의 값 하나만 반환하는 것이 filter()와 차이점입니다. 마치 하나의 값만 찾는 쿼리문 findOne() 메소드를 떠올리게 합니다. 이 둘의 차이점을 알면 상황에 따라 더 적합한 함수를 적용할 수 있겠습니다.
# 자바스크립트 Array filter() 메소드
배열 내장 메소드는 매우 다양한데 그 중에서도 많이 사용되는 메소드를 선택하라면 map(), filter(), reduce() 등이 있습니다. 필터는 자주 사용되면서도 HOF(Higher Order Function)이기 때문에 인자로 다른 함수를 받습니다. 그래서 filter()는 무엇을 할 수 있을까요?
가장 중요한 filter()의 기능은 이름처럼 배열값의 필터링(Filtering) 기능을 수행합니다. 즉 원하는 값만 쉽게 얻을 수 있도록 도와줍니다. 원하는 값만 얻는 기능은 find()가 떠오를 수 있는데 이 둘의 차이점은 제일 하단에 기술하고 아래에서는 filter()에 대하여 좀 더 알아봅니다. 먼저 간단한 문법입니다.
Array.filter(조건 함수);
// 조건 함수<Function> : 특정 조건에 따라 반환할 조건을 가진 함수로 조건이 true인 경우 해당 배열 값을 반환
이처럼 배열에서 특정 조건에 부합하는 값만 얻기 위해 쉽게 적용하고 결과를 얻을 수 있죠. 그럼 아래에서 몇 가지 예제를 만들어보겠습니다.
@ 배열에서 10보다 작은 수의 값만 얻기
만약 다음의 배열 1부터 5까지 값을 가지는 배열에서 홀수 값만 얻으려고 합니다. 이 경우 어떻게 구할 수 있을까요? 우선 홀수 값만 반환하는 함수를 만듭니다.
oddOnly = function(item) {
return item % 2 !== 0;
}
return item % 2 !== 0;
}
잘 동작하는지 테스트해봅니다.
oddOnly(3)
oddOnly(2)
oddOnly(1)
// Results
true
false
true
oddOnly(2)
oddOnly(1)
// Results
true
false
true
홀수인 경우에만 true를 반환하니 잘 만들어졌습니다. 이제 배열에 filter()를 사용해 홀수 값만 얻어봅니다.
[1, 2, 3, 4, 5].filter(oddOnly)
// Result
[1, 3, 5]
// Result
[1, 3, 5]
결과를 확인해보니 홀수만 반환되었습니다. 의도한대로 동작하는 것을 알 수 있습니다. 이처럼 filter()를 사용하면 배열에서 원하는 값만 쉽게 얻을 수 있죠. 다른 예제를 하나 더 만들어볼까요?
@ 타입이 숫자인 값만 반환하기
이번에는 먼저 배열에서 숫자 값만 반환하는 함수를 만들어야 하겠죠.
numberOnly = function(item) {
return typeof item === 'number';
}
이번에는 바로 배열에 적용해봅니다.
[1, 2, 3, 4, 5, 'a', 'b', 'c'].filter(numberOnly);
// Result
[1, 2, 3, 4, 5]
return typeof item === 'number';
}
이번에는 바로 배열에 적용해봅니다.
[1, 2, 3, 4, 5, 'a', 'b', 'c'].filter(numberOnly);
// Result
[1, 2, 3, 4, 5]
역시 숫자만 반환하였습니다. 필터링이 잘 동작하는군요!!
여기까지 filtering을 위해서 filter() 함수를 예제와 함께 알아보았습니다. 아래는 앞에 언급한 find()와 filter()의 차이입니다.
[ 참고 ] 배열 메소드 find()와 filter() 차이는?
실행 결과의 차이는 find()는 하나의 값을 반환하고 filter()는 일치하는 결과 모두를 배열로 반환합니다. map()과 reduce() 역시 map()은 배열을 reduce()는 하나의 결과를 반환하므로 약간 비슷합니다. 쉽게 말해서 find()는 제일 먼저 일치하는 조건의 값 하나만 반환하는 것이 filter()와 차이점입니다. 마치 하나의 값만 찾는 쿼리문 findOne() 메소드를 떠올리게 합니다. 이 둘의 차이점을 알면 상황에 따라 더 적합한 함수를 적용할 수 있겠습니다.
아래의 글도 찾고 계시지 않나요?
